<template>
  <div>
    <div class="top">
      <span
        id="jiantou"
        class="iconfont icon-arrow-left"
        v-on:click="fun()"
      ></span>
      <span class="libao">英雄联盟礼包中心</span>
      <span id="bazi" class="iconfont icon-youshangjiantouyuanquan"></span>
    </div>
    <!-- 背景图 -->
    <div class="picture">
      <img src="46.jpg" alt="" />
    </div>
    <!-- 小喇叭 -->
    <van-notice-bar class="laba" left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>内容 1</van-swipe-item>
        <van-swipe-item>内容 2</van-swipe-item>
        <van-swipe-item>内容 3</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
/* 顶部 */
.top {
  width: 100%;
  height: 0.4rem;
  /* background-color: aqua; */
  display: flex;
  justify-content: space-around;
}
#jiantou {
  font-size: 0.16rem;
  /* color: red; */
  /* padding-right: 2.rem; */
  height: 00.4rem;
  line-height: 00.4rem;
}
.libao {
  font-size: 0.2rem;
  font-weight: 600;
  height: 00.4rem;
  line-height: 00.4rem;
}
#bazi {
  height: 00.4rem;
  line-height: 00.4rem;
  font-size: 0.18rem;
}
/* 图片 */
.picture {
  width: 100%;
  height: 0.8rem;
}
.picture img {
  width: 100%;
  height: 100%;
}
/* 小喇叭 */
.notice-swipe {
  width: 100%;
  height: 0.4rem;
  line-height: 0.4rem;
}
.laba {
  background-color: #6e6a69;
  color: beige;
}
</style> 